<template>
  <div class="settle">
    <!--  -->
    <div class="header">
      <div class="header_left" onclick="history.back();">
        <img src="../../public/img/返回.png" alt="" />
      </div>
      <div class="header_right">确认订单</div>
    </div>
    <!-- 地址 -->
    <div class="address">
      <div class="address_img">
        <img src="../../public/img/my8.png" alt="" />
      </div>
      <div class="address_right">
        <div class="address_right_a">
          <span>{{username}}</span>
          <span>{{phone}}</span>
        </div>
        <div class="address_right_b">
          <span>{{address}}&nbsp;&nbsp;{{detaileAddress}}</span>
          <span>></span>
        </div>
        <div class="address_right_c">收货不便，可选择暂存服务</div>
      </div>
    </div>
    <!-- 物品信息 -->
    <div class="items">
      <div class="item" v-for="(val, index) in array" :key="index">
          <!-- 左 -->
        <div class="item_left">
          <img :src="val.image" alt="" />
        </div>
        <!-- 右 -->
        <div class="item_right">
          <div>{{val.text}}</div>
          <div>{{val.ml}}</div>
          <div class="price">
            <div>￥{{val.price}} <span>x{{val.num}}</span></div>
            <!-- 加减 -->
            <div class="jiajian">
              <img src="../../public/img/sub.png" class="sub" @click="sub(index)" />
              <input type="number" name="" id="" class="" v-model="val.num" readonly />
              <img src="../../public/img/add.png" class="add" @click="add(index)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="foot">
      <div class="foot_zuo">
        <span>共{{num}}件</span>
        <span>合计:</span>
        <span>￥{{total}}</span>
      </div>
      <div class="foot_you">
        <span @click="pay">提交订单</span>
      </div>
    </div>
    <!-- 弹框提示 -->
    <div class="ts" v-bind:style="{ display: blockNone }">
      {{ msg }}
    </div>
  </div>
</template>

<style  scoped>
.settle {
  width: 100%;
  background: #f6f6f6;
}
.settle > div {
  background: #fff;
}
.header {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header .header_left img {
  zoom: 0.4;
}
.header .header_right {
  font-size: 16px;
  font-weight: bold;
}
/* 地址 */
.address {
  width: 95%;
  min-height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  margin-left: 2%;
  padding: 10px 5px;
  border-radius: 4%;
}
.address_img {
  width: 20%;
  padding: 5px;
}
.address_img img {
  zoom: 0.5;
}
.address_right {
  width: 80%;
}
.address_right div {
  margin-bottom: 5px;
}
.address_right div:nth-child(1) span:nth-child(1) {
  font-size: 14px;
}
.address_right_b {
  display: flex;
  justify-content: space-between;
}
.address_right_b span:nth-child(2){
  margin-left: 16px;
  font-size: 14px;
  font-weight: bold;
}
.address_right div:nth-child(3) {
  color: red;
}
/* 底部 */
.foot {
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  background: #fff;
}
.foot_zuo span {
  line-height: 50px;
  margin-right: 10px;
}
.foot_zuo span:nth-child(1) {
  font-size: 14px;
}
.foot_zuo span:nth-child(2) {
  font-size: 16px;
}
.foot_zuo span:nth-child(3) {
  font-size: 16px;
  color: red;
  margin-right: 20px;
}
.foot_you span {
  width: 2.666667rem;
  height: 1.066667rem;
  line-height: 50px;
  border: 0.026667rem solid red;
  border-radius: 0.533333rem;
  background: red;
  text-align: center;
  font-size: 0.426667rem;
  color: #fff;
  background-image: linear-gradient(to right, rgb(255, 81, 0), red);
  font-size: 14px;
  padding: 10px 21px;
  margin-right: 15px;
}
/*  */
/* 所有物品 */
.items{
    width: 95%;
    min-height: 100px;
    margin-top: 20px;
    margin-left: 2%;
    padding: 10px 5px;
    border-radius: 4%;
}
/* 一件物品 */
.item{
    width: 100%;
    display: flex;   
}
.item_left{
    width: 30%;
}
.item_left img{
    width: 100%;
}
/*  */
.item_right{
    width: 63%;
    height: 100%;
  padding-left: 3%;
}
.item_right div:nth-child(1) {
  font-size: 0.373333rem;
  color: #1d1d1d;
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item_right div:nth-child(2) {
  font-size: 0.32rem;
  color: #c2c2c2;
}
.item_right div:nth-child(3) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12%;
}
.price div:first-child {
  color: #666;
  font-size: 0.373333rem;
}
.price div:first-child span{
    color: #aaa;
}
.jiajian input {
  width: 0.8rem;
  height: 0.533333rem;
  border: 0;
  text-align: center;
  font-size: 0.373333rem;
  background: #ffffff;
  outline: none;
}
.jiajian img {
  width: 0.693333rem;
}
/* 购买数量提示 */
.ts {
  position: fixed;
  left: 50%;
  bottom: 2.133333rem;
  width: 3.733333rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 0.666667rem;
  text-align: center;
  line-height: 30px;
  color: red;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.253);
  font-size: 0.373333rem;
}
</style>
<script>
export default {
  name: "settle",
  data() {
    return {
      username:"",
      phone:"",
      address:"",
      detaileAddress:"",
      default:false,
      can:true,    //判断是否有地址
        blockNone:"none",  //数量弹框
        msg:"",        //弹框信息
        num:"",   //件数
        total:'',  //合计
      array: [],
    };
  },
  components: {},
  methods: {
      /* 减 */
    sub(index) {
      if (this.array[index].num > 1) {
        this.array[index].num--; //数量减1
        this.num=this.array[0].num
        this.total=this.array[0].num*this.array[0].price
      } else {
        this.msg = "亲,不能再减少了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
    },
    /* 加 */
    add(index) {
      if (this.array[index].num < 9) {
        this.array[index].num++; //数量加1
        this.num=this.array[0].num
        this.total=this.array[0].num*this.array[0].price
      } else {
        this.msg = "亲,购买数量上限了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
    },
    //提交订单
    pay(){
        if(this.can){
            //localStorage.setItem("shop", JSON.stringify(this.array1));
            this.$router.replace({ path: "/PaymentSuccess" }); //进入结算页面
        }else{
            this.msg = "请先填写地址!";
            this.blockNone = "block";
            setTimeout(() => {
              this.blockNone = "none";
            }, 2000);
        }
        
      }
  },
  mounted() {
    this.array = this.$store.state.object;
    console.log(this.array)
    //console.log(this.array[0].flag);
    this.total=this.array[0].num*this.array[0].price
    this.num=this.array[0].num
    //
    //拿到本地缓存的用户地址信息
    var arr1=JSON.parse(localStorage.getItem("address"));
    if(arr1.length==0){  //如果没有地址
        this.can=false;  //开关关闭
        this.msg = "请先填写地址!";
            this.blockNone = "block";
            setTimeout(() => {
              this.blockNone = "none";
            }, 3000);
    }else{
        arr1.some((item,index)=>{   //如果有默认地址就用默认地址，没有就选第一个
        if(item.default){
          this.username=item.username;
          this.phone=item.phone;
          this.address=item.address;
          this.detaileAddress=item.detaileAddress;
          this.default=item.default;
          return true;
        }else{
          if(index=arr1.length-1){
            this.username=arr1[0].username;
            this.phone=arr1[0].phone;
            this.address=arr1[0].address;
            this.detaileAddress=arr1[0].detaileAddress;
            this.default=arr1[0].default;
          }
        }
      })
    }
  },
};
</script>
